<!--
 * @Author: 施伟略
 * @Date: 2020-07-07 11:36:58
 * @LastEditTime: 2020-07-10 14:09:07
 * @LastEditors: Please set LastEditors
 * @Description: 考试页                                      
 * @FilePath: \靖凯开源系统\jingkaisystem\src\pages\exam\exam.vue
--> 
<template>
  <div class="exam">
    <div class="content">
      <div class="container">
        <el-row>
          <!-- 左侧显示日历 -->
          <el-col :lg="14" :md="12" :sm="12" :xs="12" class="elCol-left">
            <el-calendar v-model="datestring">
              <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.13 slot 语法-->
              <template slot="dateCell" slot-scope="{date, data}">
                <div
                  :class="data.isSelected ? 'is-selected' : ''"
                >{{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : ''}}</div>
              </template>
            </el-calendar>
          </el-col>
          <!-- <el-col :span="2"></el-col> -->
          <!-- 右侧显示日历信息 -->
          <el-col :lg="8" :md="8" :sm="10" :xs="12" class="elCol-right">
            <!-- 日历标记说明 -->
            <div class="right-content">
              <h3>日历标记说明：</h3>
              <div class="content">
                <img src="../../assets/img/green.png" />
                <span>:当天已参加考试</span>
              </div>
              <div class="content">
                <img src="../../assets/img/red.png" />
                <span>:当天错过的考试</span>
              </div>
              <template v-if="btnStatus">
                <el-button type="success" @click="examStart">开始考试</el-button>
              </template>
              <template v-else>
                <el-button plain disabled>当天没有考试</el-button>
              </template>
            </div>
            <div class="right-content2">
              <h3>{{datestring | datefmt}}{{'考试信息:'}}</h3>
              <p>
                <span v-if="showContent === '当天没有考试'">
                  <div style="font-size:20px;">点击日期查看当天考试详情</div>
                </span>
                <span v-else>
                  <p></p>
                  <p></p>
                  <p></p>
                  <p></p>
                  <p></p>
                </span>
              </p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/apiList/exam.js";
import moment from "moment"
import stroage from "../../utils/storage"
export default {
  data() {
    return {
      datestring:new Date(), //选择的日期数据
      btnStatus: false, //考试按钮状态
      user:stroage.get('userInfo') || '',  //获取登录的用户信息
      examList:[],  // 考试信息列表 
      examData:'',  //当天的考试信息
      showContent:'当天没有考试'  //显示是否有考试
    };
  },
  methods: {
    moment,
    // 初始化
    async init(){
      let that = this
      await that.API_list() //异步调用每日考核数据
      await that.API_listMark() //所有学生该考试卷数据
      // await that.API_reportList() 

    },
    // 获取每日考核数据
    async API_list() {
      let that = this
      let res = await api.list({
        params:{cid:that.user.clzid}
      })
      // console.log(res)
      // 判断当天是否有考试
      if(res.data.statusCode === 300){
        that.btnStatus = false
      }else{
        that.btnStatus = true
      }
    },
    // 获取所有学生该考试卷数据
    async API_listMark() {
     let that = this
      let res = await api.listMark({
        params:{cid:that.user.clzid}
      })
      // console.log(res)
      if(res.data.statusCode === 200){
        that.examList = res.data.examlist
        console.log(res)
      }
    },
    // 获取成绩单列表数据
    // async API_reportList(datestring) {
    //   let that = this
    //   let date = datestring.replace(RegExp('/','g'),'-')  //格式化日期
    //   let res = await api.reportList({
    //     params:{date:date}
    //   })
    //   // console.log(res)
    //   if(res.data.statusCode === 200){
    //     that.examData = res.data.content[0]
    //   }
    // },
     // 获取日期考试信息数据
    async API_examList(cid) {
      let result = {
        cid
      };
      return await api.examList(this.qs.stringify(result));
    },
    // 开始考试
    examStart(){
      // 携带考试信息id跳转
      // this.$router.push("{path:'/exam',query:{eid:this.examData.id}}")
    }
  },
  created(){
    this.init()
    localStorage.setItem('time','') //考试前清空时间
  }
};
</script>

<style lang="scss" scoped>
/* .el-main{
  width: 100%;
  height: 556px;
} */
@import "@/style/exam/exam.scss";
</style>